<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>pruebas</title>
        <script type="text/javascript" src="./resources/js/jquery-1.6.2.js"></script>
        <script type="text/javascript" src="./resources/fancybox/jquery.fancybox-1.3.4.js"></script>
        <script type="text/javascript" src="./resources/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
        <script type="text/javascript" src="./resources/fancybox/jquery.easing-1.3.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="./resources/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="./resources/css/zoomer.css" media="screen" />
    <script type="text/javascript" src="./resources/js/zoomer.js"></script>
        <style type="text/css">

            
            body{
                background: url(resources/img/Titulo-superior.gif) no-repeat center top #437B27;
                padding:0;
                font-size:12px;
                margin:0 auto;
                }

            #main_container{
                margin:0 auto;
                width:1000px;
                padding:0px 0px 0px 0px;
                }

            .header{
                width:1000px;
                height:100px;
                }

            .main_content{
                margin:0 auto;
                width:1000px;
                height:400px;
                padding:0px 0px 0px 0px;
                }

            .main_pie{
                    padding: 10px;
                    margin: 10px;
                    height: 80px;
                    width: 1000px;
                }

            .center_content{
                clear:both;
                }

            .derecha_content{
                width:50px;
                height: 400px;
                }
            .izquierda_content{
                width:50px;
                height: 400px;
                }
            .centro{
                   margin-left: 0px;
                }
            .Centro_content{
                    position: absolute;
                    width:680px;
                    left: 50%;
                    margin-left: -375px;
                    
                }

                /*


                ul.thumb
                {
                    float:left;
                    list-style: none;
                    padding: 0px;
                    width: 680px;
                }
                ul.thumb li
                {
                    margin: 0px;
                    padding: 0px;
                    float:left;
                    position: relative;
                    width: 170px;
                    height: 170px;
                }
                ul.thumb li img
                {
                    width: 170px;
                    height: 170px;
                    padding: 0px;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                }
                ul.thumb li img.hover
                {
                    margin-top:10px;
                    background:url(../resources/img/marco.png) no-repeat center center;
                    z-index: 2;
                    border: none;
                }
                ul.thumb a.hover
                {
                    border: none;
                    background:url(resources/img/marco.png) no-repeat center center;
                    text-decoration: none;
                }

                ul.thumb a
                {
                    border: none;
                    display: block;
                    text-decoration: none;
                }
                .title
                {
                    position:absolute;
                    width:170px;
                    height:20px;
                    background-color:#FFF;
                    font-size:12px;
                    padding:2px 2px 2px 2px;
                    text-align:center;
                    color: #437B27;
                }*/
          </style>
    </head>
    <body>
        <script type="text/javascript" >
            $(document).ready(function(){
                $('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
                $("#l11").fancybox({
                        "width"			: 800, // 75%
                        "height"		: 700, // 75%
                        "autoScale"		: false,
                        "transitionIn"		: "elastic", //none
                        "transitionOut"		: "elastic", // none
                        "type"			: "iframe"
                        });

                
                        
                $("#l2").fancybox({
                        'width'			: 800, // 75%
                        'height'		: 550, // 75%
                        'autoScale'		: false,
                        'transitionIn'		: 'elastic', //none
                        'transitionOut'		: 'elastic', // none
                        'type'			: 'iframe'
                        });
            })
        </script>
        
        <div id ="main_container">
            <div class="header">
                
            </div>

            <div class="main_content">
                <div class="center_content">
                    <div class="Centro_content">
                        <div class="centro">
                            <ul class="thumb">
                                <li><a href="#" id="l1" ><img src="resources/img/1.gif" alt="Pruebas" /></a></li>
                                    <li><a href="contenido2.php" id="l2"><img src="resources/img/2.gif" alt="Sitios" /></a></li>
                                    <li><a href="#" id="l3"><img src="resources/img/3.gif" alt="Santa down under" /></a></li>
                                    <li><a href="#" id="l4"><img src="resources/img/4.gif" alt="Sponguebob!" /></a></li>
                                    <li><a href="#" id="l5"><img src="resources/img/5.gif" alt="Star Wars" /></a></li>
                                    <li><a href="#" id="l6"><img src="resources/img/6.gif" alt="Hulk Smash!" /></a></li>
                                    <li><a href="#" id="l7"><img src="resources/img/7.gif" alt="Dinosaur time" /></a></li>
                                    <li><a href="#" id="l8"><img src="resources/img/8.gif" alt="Orange car" /></a></li>
                                    <li><a href="#" id="l9"><img src="resources/img/9.gif" alt="Aliens!" /></a></li>
                                    <li><a href="#" id="l10"><img src="resources/img/10.gif" alt="It's Superman!" /></a></li>
                                    <li><a href="contenido1.php" id="l11"><img src="resources/img/11.gif" alt="Historia" /></a></li>
                                    <li><a href="#" id="l12"><img src="resources/img/12.gif" alt="The bridge at Sunset" /></a></li>
                            </ul>
                        </div>                     
                    </div>
                </div>                
            </div>
            <br />
                <br />
                <div class="main_pie">
                    estados
                </div>
        </div>
    </body>
</html>
